<template>
	<view>
		<u-navbar :background="background" :borderBottom="false">
			<view class="ft_16 fw-b">
				门店专区
			</view>
		</u-navbar>
		<view class="content">
			<view class="search" style="padding: 10px 0;">
				<u-search placeholder="搜索商品" v-model="keyword" bg-color="#ffffff" @custom="con_search"></u-search>
			</view>
			<view class="options display">
				<view class="option" @click="options(0)">
					<text style="padding-right: 5px;">默认排序</text>
					<u-icon name="arrow-down-fill" color="#999999" size="20"></u-icon>
					<!-- <u-icon name="arrow-up-fill" color="#999999" size="20" v-else></u-icon> -->
				</view>
				<view class="option" @click="options(1)">
					<text style="padding-right: 5px;">销量</text>
					<u-icon name="arrow-down-fill" color="#999999" size="20" v-if="sales==1"></u-icon>
					<u-icon name="arrow-up-fill" color="#999999" size="20" v-else></u-icon>
				</view>
				<view class="option" @click="options(2)">
					<text style="padding-right: 5px;">价格</text>
					<u-icon name="arrow-down-fill" color="#999999" size="20" v-if="price==1"></u-icon>
					<u-icon name="arrow-up-fill" color="#999999" size="20" v-else></u-icon>
				</view>
			</view>
			<u-waterfall v-model="shopList" ref="uWaterfall">
				<template v-slot:left="{leftList}">
					<shop v-for="(item,index) in leftList" :key="index" :shopimg="item.image" :shopname="item.name" :oldprice="item.market_price" :newprice="userInfo.role_type==0 ? item.prices:userInfo.role_type==1 ? item.prices1:userInfo.role_type==2?item.prices2:item.prices3" :man="item.activity" :yuexiao="item.sales" @click.native="go_shopList(item,index)"></shop>
				</template>
				<template v-slot:right="{rightList}">
					<view class="display" style="align-items: flex-end;flex-flow: column;">
						<shop v-for="(item,index) in rightList" :key="index" :shopimg="item.image" :shopname="item.name" :oldprice="item.market_price" :newprice="userInfo.role_type==0 ? item.prices:userInfo.role_type==1 ? item.prices1:userInfo.role_type==2?item.prices2:item.prices3" :man="item.activity" :yuexiao="item.sales" @click.native="go_shopList(item,index)"></shop>
					</view>
				</template>
			</u-waterfall>
			<!-- <view class="display just_space tuijian" style="flex-flow: wrap;">
				<shop v-for="(item,index) in shopList" :key="index" :shopimg="item.image" :shopname="item.name" :oldprice="item.market_price" :newprice="userInfo.role_type==0 ? item.prices:userInfo.role_type==1 ? item.prices1:userInfo.role_type==2?item.prices2:item.prices3" :man="item.activity" :yuexiao="item.sales" @click.native="go_shopList(item,index)"></shop>
			</view> -->
			
		</view>
		
	</view>
</template>

<script>
	import shop from "../components/shop.vue"
	export default {
		data() {
			return {
				userInfo:"",//用户信息
				background:{backgroundColor: '#ffffff',},
				
				keyword:"",//搜索内容
				option:true, //默认排序
				option1:true, //销量排序
				option2:true, //价格排序
				
				shopList:[], //商品列表
				page:1, //默认页数
				sales:1, // 销量   1/2  升序/降序
				price:1, // 价格
				
			}
		},
		components:{
			shop
		},
		onLoad(e) {
			console.log(e);
			this.userInfo=this.$all.getData('userInfo') //获取用户信息
			console.log(this.userInfo);
			this.getshopList(1,'','') //获取商品列表
		},
		onReachBottom() {//触底获取推荐商品
			this.page+=1
			console.log(this.page);
			this.getshopList(this.page,this.sales,this.price) 
		},
		methods: {
			getshopList(page,sales,price){ //获取商品列表
				this.$myRequest('goods/goods_specialList',{
					page:page,
					sales:sales,price:price,   //  1/2  升序/降序
					name:this.keyword,
				}).then(res=>{
					console.log(res.data);
					let data=res.data.data
					this.shopList.push(...data.goodslist)
					
				})
			},
			
			options(e){ //选择排序
				console.log(e);
				switch (e){
					case 0:
						this.page=1
						this.sales= ''
						this.price= ''
						this.shopList=[]
						this.$refs.uWaterfall.clear(); //清空列表数据
						this.getshopList(this.page,this.sales,this.price) //排序获取推荐商品
					break;
					case 1:
						this.page=1
						this.sales= this.sales==1 ? 2 : 1
						this.price= ''
						this.shopList=[]
						this.$refs.uWaterfall.clear(); //清空列表数据
						this.getshopList(this.page,this.sales,this.price) //排序获取推荐商品
					break;
					case 2:
						this.page=1
						this.price= this.price==1 ? 2 : 1
						this.sales= ''
						this.shopList=[]
						this.$refs.uWaterfall.clear(); //清空列表数据
						this.getshopList(this.page,this.sales,this.price) //排序获取推荐商品
					break;
				}
			},
			con_search(e){ //确定搜索内容
				this.shopList=[]
				this.$refs.uWaterfall.clear(); //清空列表数据
				this.getshopList(1,'','')
			},
			go_shopList(item,index){ //去商品详情
				console.log(index);
				uni.navigateTo({
					url:"../../../pages/shop/shopDetail?shopid="+item.id
				})
			},
			
		}
	}
</script>

<style lang="scss">
page{
	background-color: #fafafa;
}
.content{
	padding: 0 15px;
	.options{
		padding: 10px 0;
		.option{
			padding-right: 25px;
		}
	}
}

</style>
